<template>
	<el-dialog :title="titleMap[mode]" v-model="visible" destroy-on-close @closed="$emit('closed')">
		<el-form :model="form" :rules="rules" :disabled="mode=='show'" ref="dialogForm" label-width="100px" >
			<el-row>
        		<el-col :span="12">
					<el-form-item label="发射台" prop="orgId">
						<el-cascader v-model="form.orgId" :options="depts" :props="deptsProps" clearable style="width: 100%;"></el-cascader>
					</el-form-item>
        		</el-col>
        		<el-col :span="12">
					<el-form-item label="设备类型" prop="deviceType">
						<el-radio-group v-model="form.deviceType">
							<el-radio-button label="sender">发射机</el-radio-button>
							<el-radio-button label="antenna">天线</el-radio-button>
						</el-radio-group>
					</el-form-item>	
        		</el-col>
			</el-row>

			<el-row>
        		<el-col :span="12">
					<el-form-item label="设备名称" prop="deviceName">
						<el-input v-model="form.deviceName" placeholder="名称" clearable></el-input>
					</el-form-item>
        		</el-col>
        		<el-col :span="12">
					<el-form-item label="优先级" prop="priority">
						<el-select v-model="form.priority" placeholder="请选择"  style="width: 100%;">
							<el-option :value="0" label="随机"></el-option>
							<el-option :value="1" label="优先"></el-option>
						</el-select>
					</el-form-item>					
        		</el-col>
			</el-row>		

			<el-row>
        		<el-col :span="12">
					<el-form-item label="设备编号" prop="deviceNumber">
						<el-input v-model="form.deviceNumber" placeholder="设备编号" clearable></el-input>
						<div class="el-form-item-msg">设备在发射台内的或由中心统一规划的序号</div>
					</el-form-item>						
        		</el-col>
        		<el-col :span="12">
					<el-form-item label="发射机" prop="parentId" v-if="form.deviceType=='antenna'">
						<el-select v-model="form.parentId" multiple filterable style="width: 100%" >
							<el-option v-for="item in senders" :key="String(item.deviceId)" :label="item.deviceName" :value="String(item.deviceId)"/>
						</el-select>
						<div class="el-form-item-msg">如果是天线则需填写发射机DeviceID；发射机设备置空</div>
					</el-form-item>
        		</el-col>
			</el-row>		

			<el-row>
        		<el-col :span="12">
					<el-form-item label="频率下限" prop="frequency1">
						<el-input-number v-model="form.frequency1" controls-position="right" :min="1" :precision="2" style="width: 100%;"></el-input-number>
					</el-form-item>	
        		</el-col>
        		<el-col :span="12">
					<el-form-item label="频率上限" prop="frequency2">
						<el-input-number v-model="form.frequency2" controls-position="right" :min="1" :precision="2" style="width: 100%;"></el-input-number>
					</el-form-item>		
        		</el-col>				
			</el-row>		
			<el-row>
        		<el-col :span="12">
					<el-form-item label="功率下限" prop="capacity1">
						<el-input-number v-model="form.capacity1" controls-position="right" :min="1" :precision="2" style="width: 100%;"></el-input-number>
					</el-form-item>	
        		</el-col>
        		<el-col :span="12">
					<el-form-item label="功率上限" prop="capacity2">
						<el-input-number v-model="form.capacity2" controls-position="right" :min="1" :precision="2" style="width: 100%;"></el-input-number>
					</el-form-item>	
        		</el-col>				
			</el-row>	
			<el-row>
        		<el-col :span="12">
					<el-form-item label="同级设备" prop="brotherDeviceId">
						<el-select v-model="form.brotherDeviceId" multiple filterable style="width: 100%">
							<el-option v-for="item in senders" :key="String(item.deviceId)" :label="item.deviceName" :value="String(item.deviceId)"/>
						</el-select>
					</el-form-item>	
        		</el-col>
        		<el-col :span="12">
					<el-form-item label="下级设备" prop="childDeviceId">
						<el-select v-model="form.childDeviceId"  multiple  filterable style="width: 100%">
							<el-option v-for="item in senders" :key="String(item.deviceId)" :label="item.deviceName" :value="String(item.deviceId)"/>
						</el-select>
					</el-form-item>	
        		</el-col>				
			</el-row>	
			<el-row>
        		<el-col :span="12">
					<el-form-item label="备注" prop="remark">
						<el-input v-model="form.remark" placeholder="备注说明" clearable></el-input>
					</el-form-item>						
        		</el-col>
        		<el-col :span="12">
					<el-form-item label="设备状态" prop="status">
						<el-select v-model="form.status" placeholder="请选择"  style="width: 100%;">
							<el-option :value="0" label="正常"></el-option>
							<el-option :value="1" label="故障"></el-option>
							<el-option :value="2" label="检修"></el-option>
						</el-select>
					</el-form-item>
        		</el-col>				
			</el-row>	
											
		</el-form>
		<template #footer>
			<el-button @click="visible=false" >取 消</el-button>
			<el-button v-if="mode!='show'" type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
		</template>
	</el-dialog>
</template>

<script>
	export default {
		emits: ['success', 'closed'],
		data() {
			return {
				mode: "add",
				titleMap: {
					add: '新增设备',
					edit: '编辑设备',
					show: '查看'
				},
				visible: false,
				isSaveing: false,
				//表单数据
				form: {
					id:"",
					deviceName: "",
					deviceNumber:"",
					deviceType:"sender",
					parentId:'',
					avatar: "img/avatar.jpg",
					frequency1: "",
					frequency2: "",
					capacity1: "",
					capacity2: "",
					orgId: "",
					// group: [],
					status: 0,
					senders: [],
					brotherDeviceId: '',
					childDeviceId: '',
				},
				//验证规则
				rules: {
					avatar:[{required: false, message: '请上传照片'}],
					deviceName: [{required: true, message: '请输入设备名称'}],
					deviceType: [{required: true, message: '请选择设备类型'}],
					priority: [{required: true, message: '请选择优先级'}],
					frequency1: [{required: true, message: '请输入频率下限'}],	
					frequency2: [{required: true, message: '请输入频率上限'}],	
					capacity1: [{required: true, message: '请输入功率下限'}],	
					capacity2: [{required: true, message: '请输入功率上限'}],			
					orgId: [{required: true, message: '请选择发射台'}],
					status: [{required: true, message: '请选择设备状态'}],
				},
				depts: [],
				deptsProps: {
					value: "id",
					checkStrictly: true
				},
				senders:[],
				sendersProps: {
					value: "id",
					multiple: true,
					checkStrictly: true
				},
			}
		},
		mounted() {
			// this.getGroup()
			this.getDept()
		},
		methods: {
			//显示
			open(mode='add'){
				this.mode = mode;
				this.visible = true;
				return this
			},
			// //加载角色列表数据
			// async getGroup(){
			// 	var res = await this.$API.system.role.listall.get();
			// 	this.groups = res.data.rows;
			// },
			//加载发射机列表数据
			async getSender(data){
				var res = await this.$API.system.device.list.get({deviceType:'sender',groupId:(data?data.orgId:'')});   //data.orgId
				this.senders = res.data.rows;  
			},
			//加载部门树数据
			async getDept(){
				var res = await this.$API.system.dept.list.get();
				this.depts = res.data;
			},
			//表单提交方法
			submit(){
				this.$refs.dialogForm.validate(async (valid) => {
					if (valid) {
						this.isSaveing = true;
						var res = await this.$API.system.device.post.post(this.form);
						this.isSaveing = false;
						if(res.code == 200){
							this.$emit('success', this.form, this.mode)
							this.visible = false;
							this.$message.success("操作成功")
						}else{
							this.$alert(res.message, "提示", {type: 'error'})
						}
					}else{
						return false;
					}
				})
			},
			//表单注入数据
			setData(data){
				this.getSender(data)
				//可以和上面一样单个注入，也可以像下面一样直接合并进去
				Object.assign(this.form, data)
			}
		}
	}
</script>

<style scope>

</style>
